<template>
<div style="display: flex;align-items: center;padding: 10px 0 0;margin-bottom:-30px;justify-content: space-between">
    <div style="width: 35%;display: flex;align-items: center;padding-left: 90px">
      <div style="margin-top: 10px" class="userBoxShadow">
        <el-avatar :size="200" alt="头像"  shape="circle">
          <img src="./default-user.png" v-if="!formData.avatarUrl" />
          <img :src="formData.avatarUrl" else/>
        </el-avatar>
      </div>
      <el-form ref="form" :model="formData"  size="medium" style="width: 100%">
        <el-form-item label="姓名："  style="margin-top:0px;margin-bottom:10px;font-weight: bold;font-size:20px"   v-if="!choosePerOrDept">
          <span>{{formData.assessRealName}}</span>
        </el-form-item>
        <el-form-item label="部门："  style="margin-top: 0px;margin-bottom:10px;font-size: 20px;font-weight: bold;"   v-else  >
          <span>{{formData.assessDeptName}}</span>
        </el-form-item>
        <el-form-item label="编号："  style="margin-top: 0px;margin-bottom:10px;font-size: 20px;font-weight: bold;" v-if="!choosePerOrDept">
          <span>{{formData.assessUserName}}</span>
        </el-form-item>
        <el-form-item label="部门："  style="margin-top: 0px;margin-bottom:10px;font-size: 20px;font-weight: bold;" v-if="!choosePerOrDept">
          <span>{{formData.assessDeptName}}</span>
        </el-form-item>
        <el-form-item label="周期："  style="margin-top: 0px;margin-bottom:10px;font-size: 20px;font-weight: bold;">
          <span>{{formData.period}}</span>
        </el-form-item>
        </el-row>
        </el-row>
      </el-form>
    </div>
  <div style="width:50%; height:350px;margin-top: 10px;position: relative;left: -7%">
    <div ref="pie" style="width:100%; height:100%;"></div>
  </div>
  <div style="font-size: 30px;font-weight: bold;display: flex;align-content: flex-end;padding-right: 20px">
   总分： {{sumScore}}分
  </div>
</div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: "",
        props: {// 接受父组件的值
            formData:{
                type:Object
            },
            detailDataList:{
                type:Array,
                required:true
            },
            choosePerOrDept:{
                type:Number
            }
        },
        data(){
            return{
              sumScore : '',
              srcImg:'',
            }
        },
        mounted() {
            this.drawLine();
        },
        methods:{
            errorHandler(){
                return true
            },
            drawLine(){
                this.sumScore = this.detailDataList&&this.detailDataList[0]&&this.detailDataList[0].sumScore ;
                let pieList = [] ;
                this.detailDataList.map(it=>{
                    let obj = {} ;
                    obj.value = it.finalScore;
                     if (it.normName.length>8) {
                         obj.name = it.normName&&it.normName.slice(0, 9) + '...';
                     }else{
                         obj.name = it.normName ;
                     }
                    pieList.push(obj) ;
                });
                let ref = this.$refs.pie ;
                if (ref && ref !== undefined) {
                    let pieChar = echarts.init(ref);
                    pieChar.setOption({
                        tooltip: {
                            trigger: 'item',
                        },
                        title: {
                            text: '各项指标得分',
                            // subtext: '饼状图',
                            left: 'center',
                            textStyle:{fontSize: 16,top:20}
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'right',
                            top: 50
                        },
                        label: {
                            show: true,
                            position: 'center'
                        },
                        center: ['10%', '60%'],
                        color: ['#FAC858', '#5470C6','#91CC75','#EE6666','#73C0DE','#3BA272','#FC8452','#9A60B4'],/*饼状图的颜色*/
                        series: [
                            {
                                name: '指标得分',
                                type: 'pie',
                                radius: '50%',
                                data: pieList,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                }

            }
        }
    }
</script>

<style scoped>
/deep/[data-v-37c029ad] .el-form-item--small.el-form-item{margin-top: 0!important;}
/deep/.el-avatar{background: #fff!important;display: flex;justify-content: center}
.userBoxShadow{
  border: 4px solid #fff;
  -webkit-box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  margin-right: 25px;border-radius: 50%;
}
</style>
